<div class="example-container">
  <h4>Basic menu</h4>
  <div>
    <button mat-button [matMenuTriggerFor]="menu">Menu</button>
    <mat-menu #menu="matMenu">
      <button mat-menu-item>Item 1</button>
      <button mat-menu-item>Item 2</button>
    </mat-menu>
  </div>
</div>
<div class="example-container">
  <h4>Menu with icons</h4>
  <div>
    <button mat-button [matMenuTriggerFor]="menu" style="display: flex; align-items: center; ">
      <mat-icon>menu</mat-icon>
      <span>Menu</span>
    </button>
    <mat-menu #menu="matMenu">
      <button mat-menu-item>
        <mat-icon>create</mat-icon>
        <span>Create</span>
      </button>
      <button mat-menu-item>
        <mat-icon>access_alarm</mat-icon>
        <span>Alarm</span>
      </button>
    </mat-menu>
  </div>
</div>
<div class="example-container">
  <h4>Nested menu</h4>
  <div>
    <button mat-button [matMenuTriggerFor]="animals"
      (menuOpened)="openOrClosedHandle(true)"
      (menuClosed)="openOrClosedHandle(false)">Animal index</button>

    <mat-menu #animals="matMenu" >
      <button mat-menu-item [matMenuTriggerFor]="vertebrates">Vertebrates</button>
      <button mat-menu-item [matMenuTriggerFor]="invertebrates">Invertebrates</button>
    </mat-menu>

    <mat-menu #vertebrates="matMenu">
      <button mat-menu-item [matMenuTriggerFor]="fish">Fishes</button>
      <button mat-menu-item [matMenuTriggerFor]="amphibians">Amphibians</button>
      <button mat-menu-item [matMenuTriggerFor]="reptiles">Reptiles</button>
      <button mat-menu-item>Birds</button>
      <button mat-menu-item>Mammals</button>
    </mat-menu>

    <mat-menu #invertebrates="matMenu">
      <button mat-menu-item>Insects</button>
      <button mat-menu-item>Molluscs</button>
      <button mat-menu-item>Crustaceans</button>
      <button mat-menu-item>Corals</button>
      <button mat-menu-item>Arachnids</button>
      <button mat-menu-item>Velvet worms</button>
      <button mat-menu-item>Horseshoe crabs</button>
    </mat-menu>

    <mat-menu #fish="matMenu">
      <button mat-menu-item>Baikal oilfish</button>
      <button mat-menu-item>Bala shark</button>
      <button mat-menu-item>Ballan wrasse</button>
      <button mat-menu-item>Bamboo shark</button>
      <button mat-menu-item>Banded killifish</button>
    </mat-menu>

    <mat-menu #amphibians="matMenu">
      <button mat-menu-item>Sonoran desert toad</button>
      <button mat-menu-item>Western toad</button>
      <button mat-menu-item>Arroyo toad</button>
      <button mat-menu-item>Yosemite toad</button>
    </mat-menu>

    <mat-menu #reptiles="matMenu">
      <button mat-menu-item>Banded Day Gecko</button>
      <button mat-menu-item>Banded Gila Monster</button>
      <button mat-menu-item>Black Tree Monitor</button>
      <button mat-menu-item>Blue Spiny Lizard</button>
      <button mat-menu-item disabled>Velociraptor</button>
    </mat-menu>

  </div>
</div>
